<template>
    <div class="box1" @click="numberadd">
        <Aimage   :data="props.data"/>
        <div class="listexpand" v-if="store.isExpand(props.data.ipoID)" @click="handleclick(props.data)">
        <div class="list-content">
            <div class="top">
                <div class="company">{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
                </div>
                <el-icon class="icon1" @click="cardDetail">
                    <ArrowUp v-if="store.isExpand(props.data.ipoID)" />
                    <ArrowDown v-else />
                </el-icon>
            </div>
            <h4 style="margin-top: 8px;">{{ props.data.number }}</h4>
            <div v-if="store.isExpand(props.data.ipoID)" class="details">
                <h5 v-for="(item, index) in detailsItem33" :key="index">
                    <span>{{ item.name }}</span>
                    <el-icon class="icon1" v-if="item.icon">
                        <Check v-if="item.icon == 1" />
                        <img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
                    </el-icon>
                </h5>

            </div>
            <h5 v-else :style="{ color: props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '' }">{{ code22
            }}</h5>
            <h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
            <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
                $t(i18n.global.t('home.offerpricerange'))
            }}</h6>
            <h5>{{ moment(props.data.time).format('YYYY-MM-DD HH:mm') }}</h5>
            <h6>{{ props.data.listingDate ?
                $t(i18n.global.t('home.CommencementofTradeDate')) :
                $t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
            }}</h6>
        </div>
    </div>
        <div class="list" v-else @click="handleclick(props.data)" >
        
        <div class="list-content">
            <div class="top">
                <div class="company">{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
                </div>
               
                    <el-icon class="icon1" @click="cardDetail" >
                    <ArrowUp v-if="store.isExpand(props.data.ipoID)" />
                    <ArrowDown v-else />
                </el-icon>
            
                
            </div>
            <h4 style="margin-top: 8px;">{{ props.data.number }}</h4>
            <div v-if="store.isExpand(props.data.ipoID)" class="details">
                <h5 v-for="(item, index) in detailsItem33" :key="index">
                    <span>{{ item.name }}</span>
                    <el-icon class="icon1" v-if="item.icon">
                        <Check v-if="item.icon == 1" />
                        <img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
                    </el-icon>
                </h5>

            </div>
            <h5 v-else :style="{ color: props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '' }">{{ code33
            }}</h5>
            <h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
            <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
                $t(i18n.global.t('home.offerpricerange'))
            }}</h6>
            <h5>{{ moment(props.data.time).format('YYYY-MM-DD HH:mm') }}</h5>
            <h6>{{ props.data.listingDate ?
                $t(i18n.global.t('home.CommencementofTradeDate')) :
                $t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
            }}</h6>
        </div>
    </div>
    </div>
</template>

<script lang="ts" setup>
import { size } from 'lodash';
import { ref, onMounted, computed, watch } from 'vue'
import { ipoStore } from "@/stores/ipo"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import logo from '@/assets/Snipaste.png'
import { useRouter } from 'vue-router';
import { ElLoading } from 'element-plus'
import Aimage from "./a-image/index.vue";
import moment from 'moment';
import { postpv } from '@/api/reqIpo/ipo';
const { proxy } = (getCurrentInstance() as any)
const fullscreenLoading = ref(false)
const store = ipoStore();
const currentDate = ref(new Date())
const expand = ref(false);
const formatdate = ref()
const router = useRouter()
const detailsItem = ref([
    {
        name: proxy.$t('home.DealInitiated'),
        icon: 0
    },
    {
        name: proxy.$t('home.PublicOfferClosed'),
        icon: 0
    },
    {
        name: proxy.$t('home.ApplicationValidated'),
        icon: 0
    },
    {
        name: proxy.$t('home.AllotmentConfirmed'),
        icon: 0
    }
    , {
        name: proxy.$t('home.MoneySettlement'),
        icon: 0
    },
    {
        name: proxy.$t('home.AllocationConfirmed'),
        icon: 0
    }, {
        name: proxy.$t('home.placingApproved'),
        icon: 0
    }, {
        name: proxy.$t('home.AllotmentResultsApproved'),
        icon: 0
    }, {
        name: proxy.$t('home.TradingStarted'),
        icon: 0
    }
])
interface dataType {
    HKD: string,
    number: string,
    price: string,
    time: string,
    title: string,
    trading: string,
    logolinks: string,
    status: string,
    listingDate: string,
    ipoID: number,
    tradeCurrency: string
}
const props = defineProps<{ data: dataType, index: number }>()

// console.log(props.data.tradeCurrency);

const code22 = ref('')
onMounted(() => {
    setCodefn()
})
watch(props, (newValue: any, oldValue: any) => {
    setCodefn();
}, { deep: true })
const code33 = computed(() => {
    return {
        25: proxy.$t('home.DealInitiated'),
        30: proxy.$t('home.PublicOfferClosed'),
        35: proxy.$t('home.ApplicationValidated'),
        45: proxy.$t('home.AllotmentConfirmed'),
        50: proxy.$t('home.MoneySettlement'),
        55: proxy.$t('home.AllocationConfirmed'),
        60: proxy.$t('home.placingApproved'),
        65: proxy.$t('home.AllotmentResultsApproved'),
        70: proxy.$t('home.TradingStarted'),
        80: proxy.$t('home.Suspended'),
        90: proxy.$t('home.Cancelled'),
    }[props.data.status as unknown as number]
})
const detailsItem33 = computed(() => {
    var tag = true;
    const arr = detailsItem.value.map(item => {
        if (code22.value == item.name && tag) {
            tag = false;
            return { ...item, icon: 2 }
        } else if (tag) {
            return { ...item, icon: 1 }
        } else {
            return { ...item, icon: 0 }
        }
    })
    return [
        {
            name: proxy.$t('home.DealInitiated'),
            icon: arr[0].icon
        },
        {
            name: proxy.$t('home.PublicOfferClosed'),
            icon: arr[1].icon
        },
        {
            name: proxy.$t('home.ApplicationValidated'),
            icon: arr[2].icon
        },
        {
            name: proxy.$t('home.AllotmentConfirmed'),
            icon: arr[3].icon
        }
        , {
            name: proxy.$t('home.MoneySettlement'),
            icon: arr[4].icon
        },
        {
            name: proxy.$t('home.AllocationConfirmed'),
            icon: arr[5].icon
        }, {
            name: proxy.$t('home.placingApproved'),
            icon: arr[6].icon
        }, {
            name: proxy.$t('home.AllotmentResultsApproved'),
            icon: arr[7].icon
        }, {
            name: proxy.$t('home.TradingStarted'),
            icon: arr[8].icon
        }
    ]
})
function setCodefn() {
    // console.log('修改了data',newValue,oldValue);
    var obj = {
        25: proxy.$t('home.DealInitiated'),
        30: proxy.$t('home.PublicOfferClosed'),
        35: proxy.$t('home.ApplicationValidated'),
        45: proxy.$t('home.AllotmentConfirmed'),
        50: proxy.$t('home.MoneySettlement'),
        55: proxy.$t('home.AllocationConfirmed'),
        60: proxy.$t('home.placingApproved'),
        65: proxy.$t('home.AllotmentResultsApproved'),
        70: proxy.$t('home.TradingStarted'),
        80: proxy.$t('home.Suspended'),
        90: proxy.$t('home.Cancelled'),
    }
     console.log('&&&&', props)
    const stron = props.data.status
    if (isValidKey(stron, obj)) {
        code22.value = obj[stron];
        // console.log('kkkk',stron,obj[stron])
    }
    var tag = true;
    detailsItem.value = detailsItem.value.map(item => {
        if (code22.value == item.name && tag) {
            tag = false;
            return { ...item, icon: 2 }
        } else if (tag) {
            return { ...item, icon: 1 }
        } else {
            return { ...item, icon: 0 }
        }
    })

    // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
    function isValidKey(
        key: string | number | symbol,
        object: object
    ): key is keyof typeof object {
        return key in object;
    }

}
formatdate.value = moment(props.data.time).format('YYYY-MM-DD HH:mm')
const cardDetail = (e: any) => {
    e.stopPropagation();
    store.setIpoIds(props.data.ipoID)
}

let debounceTimeout1: number | undefined;
const count1 = ref(0)
//路由传参
const numberadd = ()=>{
    clearTimeout(debounceTimeout1);
  debounceTimeout1 = setTimeout(() => {
     console.log('props',props.data)
    // count1.value = ++count1.value;
    postpv({ipoClicks: '1',ipoCode:String(props.data.number)})
//    fetch ('/api/Statistics/pv', {
//       method: 'post',
//       headers: {
//         'Content-Type': 'application/x-www-form-urlencoded',
//       },
//       body: new URLSearchParams({ ipoClicks: String(count1.value),ipoId:String(props.data.ipoID) }),
//     })
//     //  .then(response => response.json())
//      .then(data => console.log(data))
//      .catch(error => console.error(error));
  }, 500); // 这里设置防抖延迟时间为 500 毫秒
}
const handleclick = (item: any) => {
    sessionStorage.setItem('ipoID', item.ipoID)
    sessionStorage.setItem('itemData', JSON.stringify(item))
  
    router.push({
        name: 'Xdashboard',
        params: { data: JSON.stringify(item) }
    },
    
    )
    
}
</script>
<style lang="scss" scoped>
.el-icon svg{
    width: 15px;
    height: 15px;
}
.company{
    white-space: nowrap; // 禁止换行
  overflow: hidden; // 超出部分隐藏
  text-overflow: ellipsis; // 超出部分以省略号表示
  font-size: 20px;
            color: #3b6181;
            font-weight: 600;
            font-family: "Calibri";
}

.box1{
   display: flex ;
   flex-direction: column ;
   margin-left: 25px;
   @media screen and (max-width: 768px) {
                flex-grow: initial;
            }
}
.listexpand {
    // height: 150px;
    width: 285px;
    display: flex;
    justify-content: center;
    font-family: "Calibri";
    background-color: #e7efec;
    overflow: hidden;
    border: 1px solid #DDE2E6;
    cursor: pointer;
   // margin-top: 190px;
  //  margin-left: -286px;
    border-radius: 0px 0px 20px 20px;
   // margin-right: 20px;
    margin-bottom: 30px;
    height: fit-content;

    .list-content {
        margin-top: 10px;
        width: 230px;

        // height: 100%;
        .details {
            .icon1 {
                margin-left: 3px;
                transform: translateY(2.5px);
            }
        }

        h4 {
            font-size: 20px;
            color: #3b6181;
            margin-bottom: 8px;
            font-weight: 600;
            font-family: "Calibri";
        }

        h5 {
            font-size: 16px;
            color: #4b6d8a;
            margin-bottom: 8px;
            font-weight: 400;
            font-family: "Calibri";
        }

        h6 {
            font-size: 12px;
            color: #5e7e98;
            margin-bottom: 8px;
            // font-family: "Calibri";
        }

        .top {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
           align-items: center;
        }

        .icon {
            @media screen and (max-width: 768px) {
                width: 11px;
                height: 13px;
            }

            width: 11px;
            height: 13px;
        }
    }
}

.list {
    // height: 150px;
    width: 285px;
    height: 210px;
    display: flex;
    justify-content: center;
    font-family: "Calibri";
    background-color: #e7efec;
    overflow: hidden;
    border: 1px solid #DDE2E6;
    cursor: pointer;
    //margin-top: 190px;
   // margin-left: -286px;
    border-radius: 0px 0px 20px 20px;
  //  margin-right: 20px;
    margin-bottom: 30px;
   // height: 216px;

    .list-content {
        margin-top: 10px;
        width: 230px;

        // height: 100%;
        .details {
            .icon1 {
                margin-left: 3px;
                transform: translateY(2.5px);
            }
        }

        h4 {
            font-size: 20px;
            color: #3b6181;
            margin-bottom: 8px;
            font-weight: 600;
            font-family: "Calibri";
        }

        h5 {
            font-size: 16px;
            color: #4b6d8a;
            margin-bottom: 8px;
            font-weight: 400;
            font-family: "Calibri";
        }

        h6 {
            font-size: 12px;
            color: #5e7e98;
            margin-bottom: 8px;
            // font-family: "Calibri";
        }

        .top {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            align-items: center;
        }

        .icon {
            @media screen and (max-width: 768px) {
                width: 11rem;
                height: 13rem;
            }

            width: 11px;
            height: 13px;
        }
    }
}

</style>
<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1400px) {
    .box1{
        margin-left: 8px;
    }
    .company{
    white-space: nowrap; // 禁止换行
  overflow: hidden; // 超出部分隐藏
  text-overflow: ellipsis; // 超出部分以省略号表示
  font-size: calc(100vw / var(--screen) * 20);
            color: #3b6181;
            font-weight: 600;
            font-family: "Calibri";
}
    .listexpand {
    // height: 150px;
    width:calc(100vw / var(--screen) * 285);
    display: flex;
    justify-content: center;
    font-family: "Calibri";
    background-color: #e7efec;
    overflow: hidden;
    border: 1px solid #DDE2E6;
    cursor: pointer;
    border-radius: 0px 0px calc(100vw / var(--screen) * 20) calc(100vw / var(--screen) * 20);
    margin-bottom: calc(100vw / var(--screen) * 30);
    height: fit-content;

    .list-content {
        margin-top: calc(100vw / var(--screen) * 10);
        width: calc(100vw / var(--screen) * 230);

        // height: 100%;
        .details {
            .icon1 {
                margin-left: calc(100vw / var(--screen) * 3);
                transform: translateY(2.5px);
            }
        }

        h4 {
            font-size: calc(100vw / var(--screen) * 20);
            color: #3b6181;
            margin-bottom: calc(100vw / var(--screen) * 8);
            font-weight: 600;
            font-family: "Calibri";
        }

        h5 {
            font-size: calc(100vw / var(--screen) * 16);
            color: #4b6d8a;
            margin-bottom: calc(100vw / var(--screen) * 8);
            font-weight: 400;
            font-family: "Calibri";
        }

        h6 {
            font-size: calc(100vw / var(--screen) * 12);
            color: #5e7e98;
            margin-bottom: calc(100vw / var(--screen) * 8);
            // font-family: "Calibri";
        }

        .top {
            display: flex;
            justify-content: space-between;
            margin-top: calc(100vw / var(--screen) * 10);
           align-items: center;
        }

        .icon {
            @media screen and (max-width: 768px) {
                width: 11px;
                height: 13px;
            }

            width: calc(100vw / var(--screen) * 11);
            height: calc(100vw / var(--screen) * 13);
        }
    }
}
.list {
    width: calc(100vw / var(--screen) * 285);
    height: calc(100vw / var(--screen) * 210);
    display: flex;
    justify-content: center;
    font-family: "Calibri";
    background-color: #e7efec;
    overflow: hidden;
    border: 1px solid #DDE2E6;
    cursor: pointer;
    border-radius: 0px 0px calc(100vw / var(--screen) * 20) calc(100vw / var(--screen) * 20);
  //  margin-right: 20px;
    margin-bottom: calc(100vw / var(--screen) * 30);
   // height: 216px;

    .list-content {
        margin-top: calc(100vw / var(--screen) * 10);
        width: calc(100vw / var(--screen) * 230);

        // height: 100%;
        .details {
            .icon1 {
                margin-left: calc(100vw / var(--screen) * 3);
                transform: translateY(2.5px);
            }
        }

        h4 {
            font-size: calc(100vw / var(--screen) * 20);
            color: #3b6181;
            margin-bottom: calc(100vw / var(--screen) * 8);
            font-weight: 600;
            font-family: "Calibri";
        }

        h5 {
            font-size: calc(100vw / var(--screen) * 16);
            color: #4b6d8a;
            margin-bottom: calc(100vw / var(--screen) * 8);
            font-weight: 400;
            font-family: "Calibri";
        }

        h6 {
            font-size: calc(100vw / var(--screen) * 12);
            color: #5e7e98;
            margin-bottom: calc(100vw / var(--screen) * 8);
            // font-family: "Calibri";
        }

        .top {
            display: flex;
            justify-content: space-between;
            margin-top: calc(100vw / var(--screen) * 10);
            align-items: center;
        }

        .icon {
            @media screen and (max-width: 768px) {
                width: 11rem;
                height: 13rem;
            }

            width: calc(100vw / var(--screen) * 11);
            height: calc(100vw / var(--screen) * 13);
        }
    }
}
}
</style>
<!-- <style lang="scss" scoped>
.el-icon svg{
    width: 15px;
    height: 15px;
}
.company{
    white-space: nowrap; // 禁止换行
  overflow: hidden; // 超出部分隐藏
  text-overflow: ellipsis; // 超出部分以省略号表示
  font-size: 20px;
            color: #3b6181;
            font-weight: 600;
            font-family: "Calibri";
}

.box1{
   display: flex ;
   flex-direction: column ;
   margin-left: 25px;
   @media screen and (max-width: 768px) {
                flex-grow: initial;
            }
}
.listexpand {
    // height: 150px;
    width: 285px;
    display: flex;
    justify-content: center;
    font-family: "Calibri";
    background-color: #e7efec;
    overflow: hidden;
    border: 1px solid #DDE2E6;
    cursor: pointer;
   // margin-top: 190px;
  //  margin-left: -286px;
    border-radius: 0px 0px 20px 20px;
   // margin-right: 20px;
    margin-bottom: 30px;
    height: fit-content;

    .list-content {
        margin-top: 10px;
        width: 230px;

        // height: 100%;
        .details {
            .icon1 {
                margin-left: 3px;
                transform: translateY(2.5px);
            }
        }

        h4 {
            font-size: 20px;
            color: #3b6181;
            margin-bottom: 8px;
            font-weight: 600;
            font-family: "Calibri";
        }

        h5 {
            font-size: 16px;
            color: #4b6d8a;
            margin-bottom: 8px;
            font-weight: 400;
            font-family: "Calibri";
        }

        h6 {
            font-size: 12px;
            color: #5e7e98;
            margin-bottom: 8px;
            // font-family: "Calibri";
        }

        .top {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
           align-items: center;
        }

        .icon {
            @media screen and (max-width: 768px) {
                width: 11px;
                height: 13px;
            }

            width: 11px;
            height: 13px;
        }
    }
}

.list {
    // height: 150px;
    width: 285px;
    height: 210px;
    display: flex;
    justify-content: center;
    font-family: "Calibri";
    background-color: #e7efec;
    overflow: hidden;
    border: 1px solid #DDE2E6;
    cursor: pointer;
    //margin-top: 190px;
   // margin-left: -286px;
    border-radius: 0px 0px 20px 20px;
  //  margin-right: 20px;
    margin-bottom: 30px;
   // height: 216px;

    .list-content {
        margin-top: 10px;
        width: 230px;

        // height: 100%;
        .details {
            .icon1 {
                margin-left: 3px;
                transform: translateY(2.5px);
            }
        }

        h4 {
            font-size: 20px;
            color: #3b6181;
            margin-bottom: 8px;
            font-weight: 600;
            font-family: "Calibri";
        }

        h5 {
            font-size: 16px;
            color: #4b6d8a;
            margin-bottom: 8px;
            font-weight: 400;
            font-family: "Calibri";
        }

        h6 {
            font-size: 12px;
            color: #5e7e98;
            margin-bottom: 8px;
            // font-family: "Calibri";
        }

        .top {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            align-items: center;
        }

        .icon {
            @media screen and (max-width: 768px) {
                width: 11rem;
                height: 13rem;
            }

            width: 11px;
            height: 13px;
        }
    }
}

</style> -->
<!-- <style lang="scss" scoped>

    .box1{
        margin-left:calc(81vw / var(--screen) * 8);
       
    }
    .company{
    white-space: nowrap; // 禁止换行
  overflow: hidden; // 超出部分隐藏
  text-overflow: ellipsis; // 超出部分以省略号表示
  font-size: calc(70vh / var(--height) * 20);
            color: #3b6181;
            font-weight: 600;
            font-family: "Calibri";
}
    .listexpand {
    // height: 150px;
    width: 285px;
    display: flex;
    justify-content: center;
    font-family: "Calibri";
    background-color: #e7efec;
    overflow: hidden;
    border: 1px solid #DDE2E6;
    cursor: pointer;
    border-radius: 0px 0px calc(81vw / var(--screen) * 20) calc(81vw / var(--screen) * 20);
    margin-bottom: calc(70vh / var(--height) * 30);
    height: fit-content;

    .list-content {
        margin-top: calc(70vh / var(--height) * 10);
        width:  230px;

        // height: 100%;
        .details {
            .icon1 {
                margin-left: calc(81vw / var(--screen) * 3);
                transform: translateY(2.5px);
            }
        }

        h4 {
            font-size: calc(70vh / var(--height) * 20);
            color: #3b6181;
            margin-bottom: calc(70vh / var(--height) * 8);
            font-weight: 600;
            font-family: "Calibri";
        }

        h5 {
            font-size: calc(70vh / var(--height) * 16);
            color: #4b6d8a;
            margin-bottom: calc(70vh / var(--height) * 8);
            font-weight: 400;
            font-family: "Calibri";
        }

        h6 {
            font-size: calc(70vh / var(--height) * 12);
            color: #5e7e98;
            margin-bottom: calc(70vh / var(--height) * 8);
            // font-family: "Calibri";
        }

        .top {
            display: flex;
            justify-content: space-between;
            margin-top: calc(70vh / var(--height) * 10);
           align-items: center;
        }

        .icon {
            @media screen and (max-width: 768px) {
                width: 11px;
                height: 13px;
            }

            width: calc(81vw / var(--screen) * 11);
            height: calc(70vh / var(--height) * 13);
        }
    }
}
.list {
    width:  285px;
    height: calc(70vh / var(--height) * 210);
    display: flex;
    justify-content: center;
    font-family: "Calibri";
    background-color: #e7efec;
    overflow: hidden;
    border: 1px solid #DDE2E6;
    cursor: pointer;
    border-radius: 0px 0px calc(81vw / var(--screen) * 20) calc(81vw / var(--screen) * 20);
  //  margin-right: 20px;
    margin-bottom: calc(70vh / var(--height) * 30);
   // height: 216px;

    .list-content {
        margin-top: calc(70vh / var(--height) * 10);
        width:  230px;

        // height: 100%;
        .details {
            .icon1 {
                margin-left: calc(81vw / var(--screen) * 3);
                transform: translateY(2.5px);
            }
        }

        h4 {
            font-size: calc(70vh / var(--height) * 20);
            color: #3b6181;
            margin-bottom: calc(70vh / var(--height) * 8);
            font-weight: 600;
            font-family: "Calibri";
        }

        h5 {
            font-size: calc(70vh / var(--height) * 16);
            color: #4b6d8a;
            margin-bottom: calc(70vh / var(--height) * 8);
            font-weight: 400;
            font-family: "Calibri";
        }

        h6 {
            font-size: calc(70vh / var(--height) * 12);
            color: #5e7e98;
            margin-bottom: calc(70vh / var(--height) * 8);
            // font-family: "Calibri";
        }

        .top {
            display: flex;
            justify-content: space-between;
            margin-top: calc(70vh / var(--height) * 10);
            align-items: center;
        }

        .icon {
            @media screen and (max-width: 768px) {
                width: 11rem;
                height: 13rem;
            }

            width: calc(81vw / var(--screen) * 11);
            height: calc(70vh / var(--height) * 13);
        }
    }
}

</style> -->